上一篇文章完成了HTML的DOM

http://ithelp.ithome.com.tw/question/10158053

接下來要介紹jQuery......

jQuery是一個開放原始碼的JavaScript函式庫，而且具備「跨瀏覽器」的相容性，
對於擷取網頁中的DOM更為簡潔，而且具備AJAX功效可以存取Web Service。

威力強大卻簡單好用（輕量化），如同jQuery官方網站的標題**「寫得少，做得多」。**

Microsoft開發工具Visual Studio在ASP.NET網站與專案上，很早就支援jQuery的開發，
透過整合的開發畫面讓您撰寫jQuery更好上手。

您也可以上網搜尋「Visual Studio Express」就能下載免費版本，

開發網頁的朋友請下載for Web版。

==== 引用jQuery到我的網頁裡面 ====

<meta charset="utf-8" />
<script type="text/javascript"
src="Scripts/jquery-1.8.0.min.js"></script>

...

註解：jQuery版本進步很快，上述的版本數1.8.0僅供參考。

您也可以從別人的網站引用這些jQuery檔案（.js檔），這種稱為CDN

一個常用的CDNs是Google網站--
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

==== 使用jQuery函式 ====

jQuery函式庫最主要的特點就是「jQuery函式（function）」，
通常使用縮寫「$()符號」來代替，也可以寫成完整的jQuery()。

通常等到整個網頁（document）都成功載入之後，呼叫jQuery函式庫的功能才會運作，

您可以在下面的程式碼看見關鍵字「ready」。

[img=415,432]http://ithelp.ithome.com.tw/upload/images/20141005/2014100519312954312c11bd5fd_resize_600.jpg[/img]

下一個範例，按下按鈕之後，網頁內的主題文字**變成紅色**。

<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("h2").css("color", "red");
});
註解：按下（.click）id=Button1的表單元件之後，會把網頁中<h2>標籤內的文字，透過CSS樣式改成紅色的字。
});
</script>

<h2>MIS2000 Lab.</h2>
<h2>簡單的 jQuery語法練習。</h2>

<input type="button" id="Button1" value="傳統HTML按鈕，改變標題的顏色" />

==== 使用jQuery選取元素與遊歷DOM ====

要抓取網頁裡面所有的<p>標籤，請寫成：
$(“p”)

如果要抓取ID名為 xyz的「所有」標籤（Tag），例如<div id=”xyz”>或是<li id=”xyz”>則請寫成：
$(“#xyz”)
//註解：JavaScript語法必須寫成document.getElementsById(“xyz”)才有相同效果。

想要抓取特定類別（Class）裡面的所有標籤，例如<div class=”RedFont”>或是 <p class=”RedFont”>請寫成：
$(“.RedFont”)

倘若要為<div>這個標籤動態加入class=”myCSS”則寫成：
$(“div”).addClass(“myCSS”)

表示我們要搜尋HTML網頁裡面，「所有」的<div>標籤（Tag），並為他們全數加上 myCSS的CSS樣式。

下一篇文章會繼續為您介紹 jQuery

寫得少，做得多。jQuery簡介(II) http://ithelp.ithome.com.tw/question/10158353

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110